<template>
  <div class="group-detail">
    <div class="bg" v-if="dataset.fission.num >0">
      <section class="whole-group group_goods">
        <section class="group_img">
          <a @click="openLink(dataset.jsapi_url)">
            <img
              :src="dataset.order.img && dataset.order.img.is_compress ?`${dataset.order.img.img_path}80x80`:dataset.order.img.img_path"
              :alt="dataset.order.item_title"
            />
          </a>
        </section>
        <section class="group_info">
          <a :href='dataset.jsapi_url' class="title">{{dataset.order.item_title}}</a>
          <section class="group_bottom">
            <span class="price"  v-html="scaleGoodsPriceFn(dataset.order.payment)"></span>
          </section>
        </section>
      </section>
      <section class="whole-group">
        <section class="group-title" v-if="!dataset.fission.is_end">
          <template v-if="dataset.is_tuan == 0">
            <template v-if="dataset.need_num > 0">
              <!-- fission.pay_type 结算时间：1付款结算，2交易完成结算' -->
              <div>再分享<span>{{dataset.need_num}}位</span>好友{{dataset.fission.pay_type == 1 ? '购买成功' : '购买且确认收货'}}, 立即享受额外奖励</div>
            </template>
          </template>
          <template v-if="dataset.need_num == 0 && percentage < 100 && dataset.is_tuan == 1 && dataset.fission.pay_type == 2">
            <div>等待确认收货后即可立即到账</div>
          </template>
        </section>
        <template v-if="dataset.is_tuan == 1 && percentage == '100'">
          <section class="group-title">
            <div class="notice-title" style="color: #F30C23">恭喜您已解锁全部奖励</div>
            <div class="success_number" v-if="dataset.success_number">成团编号：{{dataset.success_number}}</div>
          </section>
        </template>
        <section class="group-title" v-if=" Number(percentage) < 100 && dataset.fission.is_end">
          <div class="notice-title" style="color: #C9CDD4">很遗憾~来晚一步</div>
        </section>
        <section class="group_tuxedoSuccess">
          <div class="group_tuxedoSuccess_member">
            <section v-for="(item,index) in Number(dataset.fission.num)" :key="index">
              <img :src="dataset.group_head.length >0 && dataset.group_head[index] ? dataset.group_head[index] : 'https://img.wifenxiao.com/h5-wfx/images/groupshop/back_group_placeholder.png'" />
            </section>
          </div>
        </section>
        <section v-if="!(dataset.is_tuan == 1 || dataset.fission.is_end)">
          <div  class="time-count newTime">
            <div class="text">剩余</div>
            <div class="num">{{countDownList.day}}</div>
            <div class="pot">天</div>
            <div class="num">{{countDownList.hour}}</div>
            <div class="pot">:</div>
            <div class="num">{{countDownList.minute}}</div>
            <div class="pot">:</div>
            <div class="num">{{countDownList.second}}</div>
            <div class="text">结束</div>
          </div>
        </section>
        <section class="fixed_action" v-if="dataset.need_num > 0 && dataset.is_tuan == 0 && !dataset.fission.is_end">
				<wx-button open-type="share">
          <van-button round  id="fxBtn-share" class="group_btn">分享好友</van-button>
        </wx-button>
        </section>
        <section class="fixed_action" v-if="dataset.fission.is_end && Number(percentage) < 100">
          <van-button round  id="fxBtn-share" class="group_btn disabled">活动已结束</van-button>
        </section>
        <section class="fixed_action" v-if="dataset.is_tuan == 1 && percentage == '100' && !dataset.fission.is_end">
          <van-button round  id="fxBtn-share" class="group_btn" @click="openLink(dataset.jsapi_url)">再次参与</van-button>
        </section>
      </section>
      <section class="whole-group">
        <section class="success_gift">
          共计可返还<span>{{dataset.reward.total}}</span>{{type_unit}}，当前进度<span>{{dataset.reward.settled}}</span>{{type_unit}}
        </section>
        <section v-if="dataset.reward.total > 0">
          <!-- <van-progress :percentage="percentage" color="#ff564f" stroke-width="8" /> -->
          <div class="progress" style="width: 327px">
            <div class="ready-progress" :style="{width: 327 *(percentage/100)+'px'}">
              <span :style="{left: percentage ==0 ? '0px' : 327 *(percentage/100)-36+'px',minWidth: '36px'}">{{percentage}}%</span>
            </div>
          </div>
        </section>
        <section class="group_member_info">
          <section class="member_item" v-for="item in dataset.group" :key="item.id">
            <section class="img-box">
              <div>
                <img :src="item.headimgurl" />
              </div>
              <div>
                <section class="nickname">{{item.nickname}}</section>
                <section class="time"><span :class="item.order_status == '已退款' || item.order_status == '退款中' ?'disabled':''">{{item.order_status}}</span>{{item.create_time}}</section>
              </div>
            </section>
            <section class="money" v-if="!(item.order_status == '已退款' && dataset.fission.pay_type == 2)">
              <section v-if="dataset.fission.account_type== 3" class="account_type">
                <span class="price num-point" :class="item.commission_status == '冻结中' && dataset.fission.pay_type == 2 ? 'disabled': ''">
                  {{Math.floor(item.commission)}}
                </span>
                <section class="status"><span class="price" :class="item.commission_status == '冻结中' && dataset.fission.pay_type == 2 ? 'disabled': ''">
                {{type_unit}}</span></section>
              </section>
              <section v-else><span class="price" :class="item.commission_status == '冻结中' && dataset.fission.pay_type == 2 ? 'disabled': ''"  v-html="scaleGoodsPriceFn(item.commission)"></span></section>
              <section class="status" :class="item.commission_status == '冻结中' ? 'disabled': ''" v-if="dataset.fission.pay_type == 2">{{item.commission_status}}
              </section>
            </section>

          </section>
        </section>
      </section>





    </div>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
  </div>
</template>

<script>
import { scaleGoodsPrice } from '@/utils/index'
import { fissionGroup } from '@/api/item/activity'
import { openPage, mpShare} from '@/utils/utils'
import noData from '@/components/noData/index'

export default {
  data() {
    return {
      noData: {
        text: '拼命加载中...',
        marginTop: '60px'
      },
      defaultBg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
      dataset: {
        fission: {
          account_type: '',
          end_time: '',
          is_end: '',
          num: '',
          pay_type: ''
        },
        group: [],
        order: {
          img: {
            is_compress: 0,
            img_path: ''
          },
          item_id: '',
          item_title: '',
          order_item_id: '',
          payment: ''
        },
        reward: {
          settled: 0,
          total: 0
        },
        success_num: 0,
        is_tuan: 0,
        jsapi_img: '',
        jsapi_url: '',
        need_num: 0
      },
      countDownList: {
        day: '00', // 天
        hour: '00', // 时
        minute: '00', // 分
        second: '00' // 秒
      },
      interval: null,
      percentage: 0,
      type_unit: ''
    }
  },
  // 监听清除定时器
  watch: {
    random(val) {
      // console.log(val)
    }
  },
  beforeDestroy() { // 组件的销毁
    clearInterval(this.interval) // 清除定时器
    this.interval = null
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      fissionGroup({
        'order_id': this.$route.query.id
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.noData.text = 'Sorry,不是您的团哦~'
          const resData = res.data
          this.dataset = resData
          this.type_unit = this.dataset.fission.account_type == 3 ? `${this.dataset.point_name}` : '元'
          this.setIntervalTime() // 调取倒计时
          this.percentage = resData.reward.total == 0 ? 0 : Math.floor((resData.reward.settled / resData.reward.total) * 100)
          // TODO 小程序分享
          const option = {
            title: resData.order.item_title,
            imgUrl: resData.jsapi_img,
            shareParam: resData.jsapi_url.split('?')[1]
          }
          // console.log('option', option)
          // console.log('resData', resData)
          // mpShare (true, false, '/goods/pages/itemDetail/index', option,'/item-detail')
          mpShare(true, true, '/goods/pages/itemDetail/index', option,'/item-detail')
        }
      })
    },
    // 设置定时器做倒计时
    setIntervalTime() {
      this.interval = setInterval(() => {
        this.countDownList = this.getResidueTime(this.dataset.fission.end_time)
      }, 1000)
    },
    // 获取剩余时间
    getResidueTime(end) {
      let totalSeconds = 0
      if (end) {
        const nowtime = new Date().getTime() // 当前时间 毫秒数
        const endTime = end + '000'
        totalSeconds = (endTime - nowtime) / 1000 // 结束时间-当前时间 = 剩余多少时间
      }
      let day = 0
      let hour = 0
      let minute = 0
      let second = 0
      if (totalSeconds > 0) {
        day = parseInt(totalSeconds / 3600 / 24) // 天
        hour = parseInt((totalSeconds / 3600) % 24) // 时
        minute = parseInt((totalSeconds / 60) % 60) // 分
        second = parseInt(totalSeconds % 60) // 秒
      } else {
        day = 0 // 天
        hour = 0 // 时
        minute = 0 // 分
        second = 0 // 秒
        clearInterval(this.interval)
        this.$emit('finish')
      }
      hour = this.addZero(hour)
      minute = this.addZero(minute)
      second = this.addZero(second)

      const residueTime = {
        day: day, // 天
        hour: hour, // 时
        minute: minute, // 分
        second: second // 秒
      }
      return residueTime
    },
    // 补齐格式不满10加0
    addZero(n) {
      return n < 10 ? '0' + n : n
    }
  },
  components: {
    noData
  },
  created() {
    this.init()
  }
}
</script>
<style lang="scss">
.money {
  text-align: center;
  .price {
    .price-scale {
      .num-font{
        font-size: 32px;
      }
      .unit, .num-back {
        font-size: 24px;
      }
    }
    &.disabled {
      &.num-point {
        font-size: 32px;
      }
      color: #666;
      .price-scale {
        color: #666;
      }
    }
  }
}
</style>

<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
  .success_gift{
    // margin: 60px 0 30px 0;
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    span {
      color: #F21228;
      font-weight: 500
    }
  }
.group-detail {
  padding:20px;
  background:url("https://img.wifenxiao.com/h5-wfx/images/groupshop/back_one_bg.png") top center no-repeat;
  background-size:100% 34%;
  .bg{
    min-height:90vh;
    // padding: 24px;
    // border-radius:20px;
    // background:#fff;
  }
  img {
    vertical-align: middle;
  }
  .whole-group {
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
  }
  .group_goods {
    display:flex;
    padding: 24px;
    .group_img {
      overflow: hidden;
      width:150px;
      height:150px;
      line-height: 150px;
      border-radius:10px;
      margin-right: 20px;
      img {
        display: inline-block;
        width: 100%;
      }
    }
    .group_info {
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        display: block;
        font-weight:bold;
        @include lineClamp(24px,32px,2);
      }
      .goods_sku {
        color: #666;
        margin: 10px 0;
      }
      .group_bottom {
        margin:20px 0 0;
        color: #F21228;
        /* .price {
        } */
      }
    }
    .show_tip {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .group-title {
    font-size: 28px;
    text-align: center;
    p {
      font-size: 26px;
      color: #999;
      line-height: 1;
      margin-top: 20px;
    }
    span {
      color: #F21228;
    }
    .notice-title {
      text-align: center;
      color: #F21228;
      font-size: 40px;
    }
  }
  .group_tuxedoSuccess{
    &_member{
      // padding: 0 66px;
      margin-bottom: 14px;
      overflow: hidden;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      section{
        width: 20%;
        height: 88px;
        // margin-right: 30px;
        margin-top: 32px;
        &:nth-child(5n){
          margin-right: 0;
        }
        &.tuan_user {
          position: relative;
          .tuan_jp{
            position: absolute;
            bottom: -12px;
            left: 50%;
            display: inline-block;
            font-size: 20px;
            color: #fff;
            width: 64px;
            height: 28px;
            line-height:28px;
            background-color: #f21228;
            border-radius: 24px;
            transform: translateX(-50%);
          }
        }
        >img{
          max-width: 88px;
          width: 88px;
          border-radius: 50%;
        }
      }
    }
  }
  .fixed_action {
    margin: 42px auto 8px;
    .group_btn{
      width:100%;
      height:96px;
      border:0;
      background:linear-gradient(-90deg,rgba(233,1,4,1),rgba(254,27,73,1));
      box-shadow:0px 10px 16px 0px rgba(235,3,9,0.2);
      font-size:32px;
      color:#fff;
      &.disabled{
        background:#C9CDD4;
        box-shadow:initial;
        color:#fff;
      }
    }
  }

  .group_member_info {
    margin-top: 28px;
    .member_item{
      display:flex;
      // flex-wrap: wrap;
      align-items:center;
      justify-content: space-between;
      padding:32px 0;
      border-bottom: 2px solid #E5E6EB;
      .img-box{
        display: flex;
        align-items: center;
        img{
          display:block;
          width:88px;
          height:88px;
          border-radius:50%;
          margin-right: 16px;
        }

        .nickname{
          // flex:1;
          font-size:28px;
          margin-bottom: 20px;
          height: 36px;
        }
        .time{
          font-size:24px;
          color:#666;
          span {
            font-size: 20px;
            color: #FD4149;
            background: rgba(253, 65, 73, 0.10);
            border-radius: 200px;
            padding: 6px 14px;
            margin-right: 8px;
            &.disabled {
              background:#F2F3F5;
              color: #666;
            }
          }
        }
      }


      .money {
        color: #F21228;
        font-weight: 500;
        .status {
          margin-top: 10px;
          text-align: center;
          color: #F21228;
          font-size: 24px;
          &.disabled {
            color: #666;
          }
        }
      }
    }
  }
}
.newTime {
  margin-top: 32px;
  text-align: center;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    margin: 0 16px;
    position: relative;
    top: -2px;
  }
  .num {
    background: rgba(253, 65, 73, 0.10);
    border-radius: 4px;
    font-weight: 500;
    color: #FD4149;
    // padding: 4px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    /* margin-left: 2px; */
    text-align: center;

  }
  .pot {
    font-size: 24px;
    color: #FD4149;
    font-weight: 500;
    margin: 0 8px;
  }
}
.progress {
  height: 16px;
  width: 100%;
  background: #ebedf0;
  position: relative;
  border-radius: 20px;
  .ready-progress {
    position: absolute;
    left: 0;
    height: 100%;
    background: #ff5652;
    border-radius: 20px;
    span {
      position: absolute;
      top: 50%;
      box-sizing: border-box;
      padding: 6px 10px;
      color: #fff;
      font-size: 22px;
      text-align: center;
      word-break: keep-all;
      background-color: #ff5652;
      border-radius: 200px;
      transform: translateY(-50%);
    }
  }
}
.success_number {
  font-size: 24px;
  color: #FD4149;
  margin-top: 20px;
  font-weight: 500;
}
</style>